<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="place"></view>

		<view class="content-item">
			<view class="content-item-title">
				<text class="content-item-title-text">内容违规</text>
				<image class="content-item-title-img" src="@/pages5/static/images/jubao-icon.png" mode=""></image>
			</view>
			<view class="content-item-content" @tap="goReport('色情低俗')">
				<text class="content-item-content-text">色情低俗</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('政治敏感')">
				<text class="content-item-content-text">政治敏感</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('造谣传谣')">
				<text class="content-item-content-text">造谣传谣</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('涉嫌欺诈')">
				<text class="content-item-content-text">涉嫌欺诈</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('违法犯罪')">
				<text class="content-item-content-text">违法犯罪</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('诱导互动、体验差等')">
				<text class="content-item-content-text">诱导互动、体验差等</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('违规卖货、假冒商品等')">
				<text class="content-item-content-text">违规卖货、假冒商品等</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('疑似/唆使自残自杀')">
				<text class="content-item-content-text">疑似/唆使自残自杀</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('网暴他人、其他')">
				<text class="content-item-content-text">网暴他人、其他</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
		</view>

		<view class="content-item" style="border-top: 2upx solid #dfdfdf;">
			<view class="content-item-title">
				<text class="content-item-title-text">侵犯权益</text>
				<image src="@/pages5/static/images/jubao-icon.png" mode="" class="content-item-title-img"></image>
			</view>
			<view class="content-item-content" @tap="goReport('侵犯肖像、隐私、名誉、商标、专利、著作权')">
				<text class="content-item-content-text">侵犯肖像、隐私、名誉、商标、专利、著作权</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
		</view>

		<view class="content-item" style="border-top: 2upx solid #dfdfdf;">
			<view class="content-item-title">
				<text class="content-item-title-text">未成年</text>
				<image src="@/pages5/static/images/jubao-icon.png" mode="" class="content-item-title-img"></image>
			</view>
			<view class="content-item-content" @tap="goReport('未成年人不当应为')">
				<text class="content-item-content-text">未成年人不当应为</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
			<view class="content-item-content" @tap="goReport('内容不适合未成年人观看')">
				<text class="content-item-content-text">内容不适合未成年人观看</text>
				<image src="@/static/images/xiangyou.png" mode="" style="width: 14upx;height: 24upx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '视频举报',
				id: 0,
				touid: 0,
				tocate: 0,
			}
		},

		computed: {
			...mapState(['hasLogin'])
		},

		onLoad: function(options) { //option为object类型，会序列化上个页面传递的参数
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			if (!!options.id) {
				this.id = options.id
			}

			if (!!options.touid && !!options.tocate) {
				this.touid = options.touid
				this.tocate = options.tocate
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),

			async goReport(type) {
				uni.setStorageSync('report-type', type)
				uni.navigateTo({
					url: '/pages5/pages/video-resources/video-reporting?touid=' + this.touid + '&tocate=' +
						this.tocate
				})
			},
		}
	}
</script>
<style lang='scss'>
	.flex-1 {
		flex: 1;
	}

	.d-flex {
		display: flex;
	}

	.place {
		// #ifdef H5
		height: 100upx;
		// #endif
		// #ifdef MP-WEIXIN
		height: 160upx;
		// #endif

		// #ifdef APP-PLUS
		height: 160upx;
		// #endif
	}

	.content-item {
		padding: 20upx;
	}

	.content-item-title {
		display: flex;
		align-items: center;
		height: 100upx;
		line-height: 100upx;
	}

	.content-item-title-text {
		font-size: 28upx;
		margin-right: 10upx;
	}

	.content-item-title-img {
		width: 30upx;
		height: 30upx;
	}

	.content-item-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70upx;
		line-height: 70upx;
	}

	.content-item-content-text {
		font-size: 30upx;
	}
</style>
